<template>
  <el-dialog :model-value="visible" width="50%" append-to-body :show-close="false" header-class="no-header-dialog" top="8vh"  @close="cancel">
    <div class="boardBox">
      <el-tabs v-model="activeName">
        <el-tab-pane label="自定义导入" name="first" :key="first" >
          <zidingyiimport ref="childRef1" @success="changelist"/>
        </el-tab-pane>
        <el-tab-pane label="钉钉自动同步" name="second" :key="second">
          <dingdingtongbu ref="childRef2"  @success="changelist" @changeupload="changeupload"/>
        </el-tab-pane>
        <el-tab-pane label="钉钉导入" name="three" :key="three">
          <dingdingimport ref="childRef3"  @success="changelist"/>
        </el-tab-pane>
      </el-tabs>

      <div style="font-size: 20px; position: absolute; right: 20px; top: 20px" @click="cancel">
        <Close style="width: 1em; height: 1em" />
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, onMounted, nextTick } from "@/TUIKit/adapter-vue";
  import zidingyiimport from "./importcoment/zidingyiimport.vue";
  import dingdingtongbu from "./importcoment/dingdingtongbu.vue";
  import dingdingimport from "./importcoment/dingdingimport.vue";
  import { ElMessage } from "element-plus";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });

  const rules = reactive({
    name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
  });

  const activeName = ref("first");
  const queryParams = ref({ parent_name: "", parent_id: "", name: "", id: "" });
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "success", value: ""): void }>();
  const childRef1 = ref(null);
  const childRef2 = ref(null);
  const childRef3 = ref(null);

  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {
      if (newValue) {
        nextTick(() => {
          if (childRef1.value) {
            childRef1.value.childMethod(); // 直接调用子组件方法
          }
          if (childRef2.value) {
            childRef2.value.childMethod(); // 直接调用子组件方法
          }
          if (childRef3.value) {
            childRef3.value.childMethod(); // 直接调用子组件方法
          }
        });
      }
    }
  );

  onMounted(() => {});

  function cancel() {
    emit("update:visible", false);
 
  }


  function changeupload() {
    emit("success", "");
  }

  function changelist() {
    emit("success", "");
    emit("update:visible", false);
  }

  // 获取表单引用
  const queryForm = ref(null);
</script>
<style lang="scss">
.no-header-dialog {
  display: none !important;
}
</style>
<style lang="scss" scoped>
.boardBox {
  display: flex;

  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow: hidden;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;

  .tishi {
    font-size: 14px;
    color: #999;
    background-color: #f3f8fb;
    padding: 5px 10px;
    border-radius: 6px;
  }



}

::v-deep .el-tabs__item {
  font-size: 17px;

}
</style>
